<template>
  <scroll-view class="classifyBox" :scroll-y="true" @scrolltolower="scrolltolower">
    <view
      :class="activeType == item.name ? 'classify flex active' : 'classify flex'"
      v-for="item in dataList"
      :key="item.id"
      @click="clickType(item)"
    >
      <view v-show="activeType == item.name" class="classifyActive"></view>
      <view class="title">{{ item.name }}</view>
    </view>
    <view style="height: 69.23rpx"></view>
  </scroll-view>
</template>
<script setup lang="ts">
const props = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
})
const flag = ref(true)
const activeType = ref('全部')
const emit = defineEmits(['onClick', 'scrolltolower'])
// 暂时未用分页先保存
const scrolltolower = () => {
  if (flag.value) {
    flag.value = false
    emit('scrolltolower')
    setTimeout(() => {
      flag.value = true
    }, 2000)
  }
}
const clickType = (e) => {
  activeType.value = e.name
  console.log(e, 22)
  emit('onClick', e)
}
</script>

<style lang="scss" scoped>
.classifyBox {
  flex: 7;
  height: calc(100% - 100rpx);
  background-color: #f3f3f4;
  .classify {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 92.31rpx;
  }

  .active {
    font-weight: 600;
    color: #00754a;
    background-color: #fff;
  }

  .classifyActive {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8rpx;
    height: 46rpx;
    background: #00754a;
    transform: translateY(-50%);
  }

  .title {
    flex: 9;
    text-align: center;
  }
}
</style>
